<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8" />
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/mygrxx.css" />
    <link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
</head>
<body>
<!------------------------------head------------------------------>
<div th:replace="header :: html"></div>
<!------------------------------idea------------------------------>
<div class="address mt">
    <div class="wrapper clearfix">
        <a href="index.html" class="fl">首页</a>
        <span>/</span>
        <a href="mygxin.html" class="on">个人信息</a>
    </div>
</div>

<!------------------------------Bott------------------------------>
<div class="Bott">
    <div class="wrapper clearfix">
        <div th:replace="boot :: html"></div>
        <div class="you fl">
            <h2>修改密码</h2>
            <form  method="post" class="remima layui-form" id="remimaForm">
                <p class="op" id="newerror">6-12 个字符，需使用字母、数字或符号组合，不能使用纯数字、纯字母、纯符号</p>
                <p><span>新密码：</span><input type="password" id="newpassword" name="password"  lay-verify="required|password"/></p>
                <p class="op" id="reerror">请再次输入密码</p>
                <p><span>重复新密码：</span><input type="password" id="repassword" name="repassword" lay-verify="required|repassword"/></p>
                <p class="op" id="passcode">点击按钮获取验证码</p>
                <p><span>验证码：</span><input type="text" id="code" name="checkCode" lay-verify="required"/>
                    <input type="button" value="发送验证码" id="code_btn">
                </p>
                <input type="submit" value="提交" lay-submit lay-filter="remima" />
            </form>
        </div>
    </div>
</div>

<!--返回顶部-->
<div th:replace="gotop :: html"></div>
<!--footer-->
<div th:replace="footer :: html"></div>
<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/user.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/sweetalert.min.js" type="text/javascript"></script>
<script src="/js/cookie.js"></script>


<script>
    layui.use(['laydate', 'form'],function() {
        let form=layui.form;
        form.verify({
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            password: [
                /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,12}$/
                ,'密码必须6到12位，必须包含字母和数字'
            ],
            repassword : function (value,item) {
                if (value != $("#newpassword").val()){
                    return "两次密码不一致";
                }
            }
        });
    });
</script>
<script th:inline="javascript">
    /*<![CDATA[*/
        let email=[[${session.user.email}]];

        $("#code_btn").click(function() {
            //发送验证码邮件
            layer.msg('邮件发送中，请稍后', {
                icon: 16,
                time: 0 //不自动关闭
                ,shade:  [0.8, '#393D49']
            });
            $.get("/user/sendEmail",{"email":email},function (data) {
                if (data.code===200){
                    layer.closeAll('loading'); //关闭加载层
                    layer.msg("邮件发送成功",{time:2000,offset: '100px',icon:1});
                    addCookie("secondsremained", 60, 60); //添加cookie记录,有效时间60s
                    settime($("#code_btn")); //开始倒计时
                }else{
                    layer.closeAll('loading'); //关闭加载层
                    layer.msg(data.message,{offset: '100px',icon:2});
                }
            });

        });
        if(getCookieValue("secondsremained") > 0) {
            $("#code_btn").attr("disabled", "true");
            settime($("#code_btn")); //开始倒计时
        }
        $("#remimaForm").submit(function () {
            $.ajax({
               type:'post',
               url:'/user/remima',
                dataType: "json",
                data: {"password":$("#newpassword").val(),"checkCode":$("#code").val()},
               success: function (data) {
                    if (data.code === 200) {
                        location.href="/logout";
                    } else {
                        layer.msg(data.message,{offset: '100px',icon:2});
                    }
                }
            });
            return false;
        })
    /*]]>*/
</script>
</body>
</html>

